<template>
  <div class="total" >
    <!-- 头部标签 -->
 <header>
<van-nav-bar title="评分"  left-arrow   @click-left="onClickLeft">
  <template #right>
      <p>排序</p>
   <i><img src="../../assets/消息中心/排序.png" alt=""  height="100%" ></i> 
  </template>
</van-nav-bar>
 </header>
 <!-- tab导航 -->
 <div class="tab">
     <van-tabs v-model="active" @click="onClick" >
  <van-tab title="全部消息" name="/message/all"></van-tab>
  <van-tab title="系统消息" name="/message/system" ></van-tab>
  <van-tab title="个人消息" name='/message/user'></van-tab>

  <router-view></router-view>
</van-tabs>
</div>
  </div>
</template>

<script>
import comp from '../message/comp.vue'

export default {
data(){
  return{ 
      active:'',
     
  }
},
components:{
  comp
},
created(){
  this.$router.push('/message/all')
},
methods:{
     onClickLeft() {
      this.$router.push('/login')
    },
     onClick(name) {
       this.$router.push(name)
    },
 }
}
</script>

<style lang='less' >
.list{
  margin: 5% 0;
}
*{
    font-size: .18rem!important;
}
.total{
  background-color: #f5f5f5;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem;
    color: white;
}
     }
    p{
        color: white;
    font-size: .4rem; 
    }
    i{
        height: .2rem;
    }
}
.van-tabs__line{
    background-color: yellow;
    width:20%
}
</style>    